﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Responsive Accordion Slider::Demo 2</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/raccordion.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/jquery.raccordion.js" type="text/javascript"></script>
    <script src="js/jquery.animation.easing.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(window).load(function () {
            $('#accordion-wrapper').raccordion({
                speed: 1000,
                sliderWidth: 940,
                sliderHeight: 300,
                autoCollapse: true
            });

        }); 
    </script>
</head>
<body>
    <div class="wrapper">
        <div id="logo">
            <h2>
                raccordion</h2>
            <hr />
            <h3>
                responsive image accordion</h3>
        </div>
        
        <div id="accordion-wrapper">
            <div class="slide">
                <img src="images/slide1.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide2.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide3.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide4.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis, Sed pharetra consectetur
                        risus eu blandit. Fusce volutpat adipiscing eleifend. Aliquam gravida mollis odio,
                        a consequat urna dictum quis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide5.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide6.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
